<template>
  <div class="_wz_cent_main _wz_position">
    <Card :bordered="true" style="height: 100%;overflow: hidden;">
      <p slot="title">列表</p>
      <p slot="extra">
        <label>折叠</label>
        <i-switch v-model="folded"/>
        <Button type="primary" @click="addTableData">添加</Button>
        <Button type="primary" @click="tableLoadData">刷新</Button>
      </p>

      <zk-table ref="zkTable" :data="dataList" :columns="columns" :show-index="true" :is-fold="folded" :stripe="true" :border="true" :show-header="true" :show-row-hover="true" :tree-type="true" :expand-type="false" children-prop="children" :selection-type="false">

        <template slot="inOrgType" slot-scope="scope">
          <div>
            <Tag color="primary" v-if="scope.row.inOrgType == 1" type="dot">管理型单位</Tag>
            <Tag color="success" v-if="scope.row.inOrgType == 2" type="dot">生产型单位</Tag>
          </div>
        </template>

        <template slot="operation" slot-scope="scope">
          <div>
            <span style="color: #2d8cf0;cursor: pointer;" @click="modifyTableData(scope.row)">修改</span>
              <Divider type="vertical"/>
              <span style="color: #2d8cf0;cursor: pointer;" @click="removeTableData(scope.row)">删除</span>
          </div>
        </template>
      </zk-table>
    </Card>
    <Drawer :title="formTitle" v-model="formOperation" width="720" :draggable="true" :mask-closable="false" :styles="formOperationStyles">
      <positionAdd v-if="formOperation" :selectData="selectData" @closeFun="closeFun"></positionAdd>
    </Drawer>
  </div>
</template>

<script>
import positionAdd from "./positionAdd.vue";
export default {
  components: {
    positionAdd,
  },
  data() {
    return {
      columns: [
        { label: '部门名称', prop: 'inOrgName',minWidth:'160px'},
        { label: '部门类型', prop: 'inOrgType',minWidth:'160px',type: 'template', template: 'inOrgType'},
        { label: '上级部门', prop: 'parentName',minWidth:'260px'},
        { label: '负责人', prop: 'managerUserName',minWidth:'100px'},
        { label: '运输企业', prop: 'deptName',minWidth:'260px'},
        { label: '操作', align: "center", type: 'template',width:'120px', template: 'operation', }
      ],
      folded: false,//折叠
      selectData: {},
      formTitle: "",
      formOperation: false,//表单左侧移出
      formOperationStyles: {//表单左侧移出css
        height: 'calc(100% - 55px)',
        overflow: 'inherit',
        paddingBottom: '53px',
        position: 'static'
      },
      dataList: [],
      inOrgList:[],
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;
    that.tableLoadData();
  },
  methods: {//执行的方法
    //表格数据
    tableLoadData() {
      var that = this
      that.dataList = [];
      that.$Spin.show()
        that.axios.post(that.apiUrl.coreInOrgCoreInOrgList,{}).then(res => {
          that.$Spin.hide()
        if (!!res) {
          that.inOrgList = res.data.data;
          //下拉表格
          var treeAttr = {
            id: 'id',
            parendId: 'parentId',
            name: 'inOrgName',
            rootId: 0
          }
          that.dataList = that.public.toTreeData(JSON.parse(JSON.stringify(res.data.data)), treeAttr);
        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
    //table添加
    addTableData() {
      this.formTitle = "添加"
      this.selectData = {};
      this.formOperation = true
    },
    //修改
    modifyTableData(data) {
      var that = this;
      that.selectData = JSON.parse(JSON.stringify(data));
      that.formTitle = "修改";
      that.formOperation = true
    },
    //删除
    removeTableData(data) {
      var that = this;
      that.$Modal.confirm({
        title: '删除提醒',
        content: '确定要删除选中的数据？',
        onOk: () => {
          that.$Spin.show()
          that.axios.post(that.apiUrl.coreInOrgCoreInOrgDelete, {uuid: data.uuid}).then(res => {
            that.$Spin.hide()
            if (!!res) {
              that.$Message.success('删除成功')
              that.tableLoadData()
            }
          }).catch(err => {
            console.log('失败', err)
          })
        },
        onCancel: () => {
          //点击取消
        }
      })
    },
    //关闭 弹出框刷新列表
    closeFun(data) {
      if (data) {//添加修改 刷新表单
        this.tableLoadData()
      }
      this.formOperation = false
    },
  },
  watch: {//监听
  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_position {
  display: flex;
  flex-direction: column;

  .ivu-card-body {
    height: calc(100% - 51px);

    .zk-table {
      height: 100%;

      .zk-table__body-wrapper {
        height: calc(100% - 41px) !important;
        overflow: auto;

        .zk-table__body-row:last-child {
          border-bottom: 1px solid #e9eaec;
        }
      }
    }
  }

  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    position: absolute;
  }


  .ivu-checkbox-inner {
    border-radius: 50%;
  }
  .ivu-select-dropdown-list {
    padding-left: 5px;
  }
}
</style>
